import { Link, RepoLink, Construction } from '@brillout/docpress'
import { UiFrameworkExtension, ConfigSpec } from '../../components'

<ConfigSpec
  env="client"
  cumulative={false}
/>


You can define a `+client.js` file to add client-side JavaScript.

It's usually used for initializing <Link href="/error-tracking">error tracking</Link>, user tracking, cookie consent, CSS frameworks, etc.

```ts
// /pages/+client.ts
// Environment: client

console.log("I'm the first line of client-side JavaScript.")
```

> In production, it's the very first JavaScript code to be executed. In development, it's run first after Vite's HMR preamble.

> The code of `+client.js` isn't re-executed upon client-side page navigation. For executing code upon the lifecycle of page rendering, see following hooks instead:
> - <Link href="/onHydrationEnd" />
> - <Link href="/onAfterRenderClient" />
> - <Link href="/onBeforeRenderClient" />
> - <Link href="/onPageTransitionStart" />
> - <Link href="/onPageTransitionEnd" />

> Currently, `+client.js` isn't cumulative but it's work-in-progress, see [1834 - Make `+client.js` cumulative](https://github.com/vikejs/vike/issues/1834).

## Examples

* <RepoLink path="/examples/render-modes/pages/html-js/+client.js" />
* <Link href="/render-modes#html-only" />


## See also

- <Link href="/onHydrationEnd" />
- <Link href="/onAfterRenderClient" />
- <Link href="/onBeforeRenderClient" />
- <Link href="/onPageTransitionStart" />
- <Link href="/onPageTransitionEnd" />
- <Link href="/settings" />
